<template>
  <div class="agentList">
    <div class="title">
      经纪人列表
    </div>
    <!-- 顶部搜索 -->
    <div class="header-top">
      <el-form :inline="true">
        <el-form-item label="区域">
          <el-select v-model="tiaojian.first" placeholder="选择区" style="width: 120px;" @change="changeArea">
            <el-option v-for="(item, index) in options.first" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-select v-model="tiaojian.second" placeholder="选择地方" style="width: 120px;">
            <el-option v-for="(item, index) in options.second" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="经纪人姓名">
          <el-input clearable v-model="tiaojian.name" placeholder="姓名" style="width: 150px;"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="search" type="primary" @click="goSearch">查询</el-button>
          <el-button type="info" @click="clearTj">清空条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <el-table :data="initData.list" style="width: 100%" max-height="450" v-loading="loading">
      <el-table-column align="center" header-align="center" prop="avatar" label="头像" width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.avatar" width="80">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="agentName" label="姓名" width="90">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="phone" label="电话">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="serveArea" label="服务片区">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="branch" label="所属支行">
      </el-table-column>
      <el-table-column align="center" header-align="center" prop="hisServe" label="历史成交数" width="115" sortable>
        <template slot-scope="scope">
          {{scope.row.hisService}}套
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" header-align="center" prop="createAt" label="注册日期" width="160">
      </el-table-column> -->
      <el-table-column align="center" header-align="center" prop="updatedAt" label="更新日期" width="160" sortable>
        <template slot-scope="scope">
          {{$util.formDate(scope.row.updatedAt)}}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="editInfo(scope.row)">编辑</el-button>
          <!-- <el-button type="danger" size="mini">删除</el-button> -->

          <el-popconfirm title="确定删除此经纪人吗？" @confirm="delRecord(scope.row)" style="margin-left:10px">
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 15, 20]" :page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="params.total"></el-pagination>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="dialog.edit" width="650px" center>
      <template slot="title">
        <b>编辑经纪人</b>
      </template>
      <el-form ref="infoData" :model="infoData" label-width="90px" :inline="true">
        <el-form-item label="经纪人姓名">
          <el-input v-model="infoData.agentName" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="infoData.phone" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="所属支行">
          <el-input v-model="infoData.branch" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="所在区">
          <el-select v-model="infoData.location" placeholder="选择区" style="width:200px;">
            <el-option v-for="(item, index) in options.first" :key="index" :label="item.label" :value="item.value" v-show="index != 0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="服务地区">
          <el-input v-model="infoData.serveArea" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="历史成交量">
          <el-input v-model="infoData.hisService" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="职务" style="display:block;">
          <el-input v-model="infoData.position" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="好评">
          <el-input v-model="infoData.hp" style="width:90px;"></el-input>
        </el-form-item>

        <el-form-item label="中评">
          <el-input v-model="infoData.zp" style="width:90px;"></el-input>
        </el-form-item>

        <el-form-item label="差评">
          <el-input v-model="infoData.cp" style="width:90px;"></el-input>
        </el-form-item>

        <el-form-item label="服务态度" label-width="70px">
          <el-rate v-model="infoData.serve" style="height:40px;line-height:50px;"></el-rate>
        </el-form-item>

        <el-form-item label="熟悉房源" label-width="70px">
          <el-rate v-model="infoData.house" style="height:40px;line-height:50px;"></el-rate>
        </el-form-item>

        <el-form-item label="专业能力" label-width="70px">
          <el-rate v-model="infoData.major" style="height:40px;line-height:50px;"></el-rate>
        </el-form-item>

        <el-form-item label="是否为星选推荐" label-width="110px">
          <el-radio-group v-model="infoData.rec">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="成交达人" label-width="110px">
          <el-radio-group v-model="infoData.tag1">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="超赞经纪人" label-width="110px">
          <el-radio-group v-model="infoData.tag2">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="标签" label-width="110px">
          <el-input v-model="infoData.tag3" placeholder="片区之星/小区专家/学区专家"></el-input>
        </el-form-item>

        <el-form-item label="头像">
          <img :src="infoData.avatar" alt="" width="80">
        </el-form-item>

        <div style="text-align: center;">
          <el-button @click="dialog.edit = false" style="width: 100px">取消</el-button>
          <el-button type="primary" @click="submit" style="width: 100px">确定</el-button>
        </div>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'agentList',
  data() {
    return {
      loading: false,
      initData: {
        list: [],
      },
      dialog: {
        edit: false
      },
      infoData: {
        id: '',
        agentName: '',
        phone: '',
        branch: '',
        location: '',
        serveArea: '',
        hisService: '',
        position: '',
        rec: '',
        hp: '',
        zp: '',
        cp: '',
        serve: '',
        house: '',
        major: '',
        tag1: '',
        tag2: '',
        tag3: '',
        avatar: '',
      },
      options: {
        first: [],
        second: []
      },
      tiaojian: {
        first: '',
        second: '',
        name: '',
      },
      params: {
        page: 1,
        size: 10,
        total: 0,
        name: '',
        first: '',
        second: '',
      },
    }
  },
  created() {
    if (this.$cookies.get('__ac') != 1) {
      this.$router.push({ name: 'B_HouseList' })
      return
    }
    let oj = {
      title: '经纪人列表',
      nav: '2-2',
    };
    this.$emit('isTitle', oj);
    this.options.first = JSON.parse(JSON.stringify(this.$root.areaData));
    // console.log('areaData==>', this.options.first)
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      let data = {
        page: this.params.page,
        size: this.params.size,
        location: this.params.first == '不限' ? '' : this.params.first,
        serveArea: this.params.second == '不限' ? '' : this.params.second,
        agentName: this.params.name
      }
      this.axios({
        method: 'get',
        url: this.baseUrl + '/getAgent',
        params: data
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.loading = false;
          this.initData.list = res.data.data;
          this.params.total = res.data.total;
          console.log(this.initData.list)
          // this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
          this.loading = false;
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 改变搜索条件
    goSearch() {
      this.params.page = 1;
      this.params.first = this.tiaojian.first;
      this.params.second = this.tiaojian.second;
      this.params.name = this.tiaojian.name;
      this.init();
    },
    // 清空条件
    clearTj() {
      this.tiaojian.first = '';
      this.tiaojian.second = '';
      this.tiaojian.name = '';
      this.goSearch();
    },
    // 选择区域
    changeArea() {
      console.log(this.params.first)
      this.tiaojian.second = '';
      for (const i in this.options.first) {
        if (this.options.first[i].value == this.tiaojian.first) {
          console.log(this.options.first[i].value)
          this.options.second = this.options.first[i].children;
        }
      }
    },
    // 编辑信息
    editInfo(o) {
      if (this.$refs.infoData) {
        this.$refs.infoData.resetFields();
      }
      this.infoData = {
        id: o.id,
        agentName: o.agentName,
        phone: o.phone,
        branch: o.branch,
        location: o.location,
        serveArea: o.serveArea,
        hisService: o.hisService,
        position: o.position,
        rec: o.rec,
        hp: o.hp,
        zp: o.zp,
        cp: o.cp,
        serve: o.serve,
        house: o.house,
        major: o.major,
        tag1: o.tag1,
        tag2: o.tag2,
        tag3: o.tag3,
        avatar: o.avatar,
      };
      this.dialog.edit = true;
    },
    // 提交信息
    submit() {
      this.$refs['infoData'].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: this.baseUrl + '/editAgent',
            data: this.infoData
          }).then(res => {
            console.log('res==>', res)
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.dialog.edit = false;
              this.init();
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            console.log('err==>', err)
            this.$message.error(res.data.msg)
          })
        } else {
          this.$message.warning('请完善所有信息')
        }
      })

    },
    // 删除记录
    delRecord(o) {
      this.axios({
        method: 'post',
        url: this.baseUrl + '/deleteAgent',
        data: {
          id: o.id,
        }
      }).then(res => {
        console.log('res==>', res)
        if (res.data.code == 200) {
          this.$message.success('删除记录成功')
          this.params.page = 1;
          this.init();
        } else {
          this.$message.error('删除记录失败')
        }
      }).catch(err => {
        console.log('err==>', err)
        this.$message.error(res.data.msg)
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
      this.init();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.init();
    }
  }
}
</script>

<style lang="less" scoped>
.agentList {
  background-color: #fff;
  .title {
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 30px;
    text-align: center;
  }
}
</style>